<template>
	<div class="top">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>
				<a href="/Classification">课程管理</a>
			</el-breadcrumb-item>
			<el-breadcrumb-item>课程信息管理</el-breadcrumb-item>
		</el-breadcrumb>
	</div>

	<div class="middle">
		<el-form :inline="true" :model="queryInfo" class="demo-form-inline form-search">
			<el-form-item label="课程名称">
				<el-input v-model="queryInfo.courseName" placeholder="请输入课程名称" clearable @clear="querydata" />
			</el-form-item>
			<el-form-item label="课程分类">
				<el-select v-model="queryInfo.courseClassifyId" clearable placeholder="请选择课程分类">
					<el-option label="咨询师培训" value="1" />
					<el-option label="智慧生活01" value="2" />
				</el-select>
			</el-form-item>
			<el-form-item label="心理师名">
				<el-input v-model="queryInfo.counselorName" placeholder="请输入心理师名" clearable @clear="querydata" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="querydata">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="add">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="remove" :disabled="multipleSelection.length === 0">批量删除</el-button>
			</el-form-item>
		</el-form>
	</div>

	<div class="bottom">
		<el-table
			:data="tableData"
			row-key="id"
			style="width: 100%"
			@selection-change="handleSelectionChange"
			border
			stripe
			class="course-table"
		>
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="课程ID" width="100" align="center" />
			<el-table-column prop="courseName" label="课程名称" width="120" align="center" />
			<el-table-column prop="courseTime" label="时长" width="100" align="center" />
			<el-table-column prop="courseCount" label="数量" width="100" align="center" />
			<el-table-column prop="learnCount" label="学习量" width="100" align="center" />
			<el-table-column prop="courseIntro" label="简介" width="150" align="center" show-overflow-tooltip />
			<el-table-column prop="coursePrice" label="价格" width="100" align="center" />
			<el-table-column prop="courseClassifyName" label="分类" width="120" align="center" />
			<el-table-column prop="counselorName" label="心理导师名" width="120" align="center" />
			<el-table-column label="操作" width="180" align="center">
				<template #default="scope">
					<el-button size="small" type="primary" @click="editdata(scope.row)">编辑</el-button>
					<el-button size="small" type="danger" @click="deletedata(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="demo-pagination-block">
			<el-pagination
				v-model:current-page="queryInfo.pageNum"
				v-model:page-size="queryInfo.pageSize"
				:page-sizes="[5, 10, 15, 20]"
				:background="true"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
	</div>

	<el-dialog v-model="dialogFormVisible" :title="Title" width="500">
		<el-form :model="form" label-width="110px" class="dialog-form">
			<el-form-item label="课程名称">
				<el-input v-model="form.courseName" autocomplete="off" />
			</el-form-item>
			<el-form-item label="课程时长">
				<el-input v-model="form.courseTime" autocomplete="off" />
			</el-form-item>
			<el-form-item label="课程数量">
				<el-input v-model="form.courseCount" autocomplete="off" />
			</el-form-item>
			<el-form-item label="适用人群">
				<el-input v-model="form.applicableGroup" autocomplete="off" />
			</el-form-item>
			<el-form-item label="学习收获">
				<el-input v-model="form.learningGain" autocomplete="off" />
			</el-form-item>
			<el-form-item label="订阅须知">
				<el-input v-model="form.notice" autocomplete="off" />
			</el-form-item>
			<el-form-item label="课程价格">
				<el-input v-model="form.coursePrice" autocomplete="off" />
			</el-form-item>
			<el-form-item label="心理师名">
				<el-input v-model="form.counselorName" autocomplete="off" />
			</el-form-item>
			<el-form-item label="课程分类">
				<el-select v-model="form.courseClassifyId" placeholder="请选择课程分类"  width="500">
					<el-option label="免费公开课" value="5" />
					<el-option label="咨询师培训" value="1" />
				</el-select>
			</el-form-item>
			<el-form-item label="课程简介">
				<el-input v-model="form.courseIntro" autocomplete="off" type="textarea" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancle">取消</el-button>
				<el-button type="primary" @click="addform">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { getCurrentInstance, onMounted, reactive } from 'vue'
	import { ref } from 'vue'
	import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
	import type { ComponentSize } from 'element-plus'
	const multipleTableRef = ref<TableInstance>()
	const queryInfo = reactive({
		id: 0,
		courseName: '',
		courseTime: 0,
		courseCount: 0,
		learnCount: 0,
		courseIntro: '',
		applicableGroup: '',
		learningGain: '',
		notice: '',
		coursePrice: 0,
		courseClassifyName: '',
		courseClassifyId: '',
		counselorName: '',
		pageSize: 10,
		pageNum: 1
	});
	const tableData = ref([]);
	const total = ref(0);
	const Title = ref('')
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;
	const querydata = () => {
		axios.get('course/page', {
			params: queryInfo
		}).then((resp) => {
			if (resp.code == 200) {
				console.log(resp);
				tableData.value = resp.data.list;
				total.value = resp.data.total;
			}
		})
	}
	onMounted(() => {
		querydata()
	})





	const size = ref<ComponentSize>('default')
	const background = ref(false)
	const disabled = ref(false)

	const handleSizeChange = (val : number) => {
		queryInfo.pageSize = val;
		querydata()
	}
	const handleCurrentChange = (val : number) => {
		queryInfo.pageNum = val;
		querydata()
	}


	const dialogFormVisible = ref(false)

	const formLabelWidth = '140px'

	const form = ref({
		applicableGroup: "",
		counselorName: "",
		courseClassifyName: "",
		courseCount: 0,
		courseIntro: "",
		courseName: "",
		coursePrice: 0,
		courseTime: 0,
		id: 0,
		learningGain: "",
		notice: "",
		courseClassifyId: 0
	})
	const add = () => {
		Title.value = '新增表单',
			dialogFormVisible.value = true
	}
	const cancle = () => {

		form.value = {
			applicableGroup: "",
			counselorName: "",
			courseClassifyName: "",
			courseCount: 0,
			courseIntro: "",
			courseName: "",
			coursePrice: 0,
			courseTime: 0,
			id: 0,
			learningGain: "",
			notice: "",
			courseClassifyId: 0
		}
		dialogFormVisible.value = false
	}
	const addform = () => {
		if (form.value.id) {
			// 编辑操作
			axios.put('course', form.value).then((resp) => {
				if (resp.code == 200) {
					dialogFormVisible.value = false;
					querydata();
					ElMessage.success('编辑成功');
				} else {
					ElMessage.error('编辑失败');
				}
			}).catch(error => {
				console.error('Error:', error);
				ElMessage.error('请求出错，请重试');
			})
		} else {
			// 新增操作
			axios.post('course', form.value).then((resp) => {
				if (resp.code == 200) {
					dialogFormVisible.value = false;
					querydata();
					ElMessage.success('新增成功');
				} else {
					ElMessage.error('新增失败');
				}
			}).catch(error => {
				console.error('Error:', error);
				ElMessage.error('请求出错，请重试');
			})
		}
	}
	const editdata = (row) => {
		console.log(row);
		Title.value = "编辑咨询师"
		dialogFormVisible.value = true;
		form.value = row
	}

	const deletedata = (id) => {
		ElMessageBox.confirm(
			'确定要删除此课程吗？',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}
		).then(() => {
			axios.delete(`course/${id}`).then((resp) => {
				if (resp.code == 200) {
					querydata();
					ElMessage.success('删除成功');
				} else {
					ElMessage.error('删除失败');
				}
			}).catch(error => {
				console.error('Error:', error);
				ElMessage.error('请求出错，请重试');
			})
		}).catch(() => {
			// 用户取消操作
		})

	}

	const remove = () => {
		ElMessageBox.confirm(
			'确定要删除此课程吗？',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}
		).then(() => {
			axios.delete(`course/`, {
				params: {
					ids: multipleSelection.value.join(',')
				}
			}).then((resp) => {
				if (resp.code == 200) {
					querydata();
					ElMessage.success('删除成功');
				} else {
					ElMessage.error('删除失败');
					console.log(multipleSelection.value);
				}
			}).catch(error => {
				console.error('Error:', error);
				ElMessage.error('请求出错，请重试');
			})
		}).catch(() => {
			// 用户取消操作
		})

	}
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		multipleSelection.value = val.map(item => {
			return item.id
		})
	}
</script>

<style scoped>
.top {
	margin-bottom: 20px;
}
.form-search {
	background: #fff;
	padding: 20px 24px 0 24px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.middle {
	margin-bottom: 20px;
}
.course-table {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.demo-pagination-block {
	margin: 24px 0 0 0;
	text-align: right;
}
.dialog-form {
	padding-top: 10px;
}
.el-select {
	width: 150px;
}
</style>